<template>
  <view class="main">
    <view class="header">
      <alltitleVue :title="title" :url="url" />
      <!-- <view class="header-title">
        <view 
          @click="scrollToTop(index)" 
          :class="{'borcolor': isbor === index}" 
          v-for="(item, index) in reviewTit" 
          :key="index">
		  <view class="tit">
		  	{{ item.name }}
		  </view>
          <view class="">
          	{{ item.count }}
          </view>
        </view>
      </view> -->
    </view>

    <!-- 评论列表 -->
    <view v-if="review.length > 0" class="action">
      <view class="review-item" v-for="(item, index) in review" :key="index" @click="goreView(item,index)">
        <reviewVue :item="item" />
      </view>
    </view>
    <!-- 如果没有评论 -->
    <view v-else class="no-empty">
      <u-empty text="暂无评价" mode="list"></u-empty>
    </view>
  </view>
</template>

<script>
	import {
		
		evaluate,
		
	} from '../../service/api.js'
import reviewVue from '../../components/review.vue';

export default {
  components: {
    reviewVue,
  },
  onLoad(options) {
  	
  	if (options.id) {
  		this.id=options.id
  		
  		this.getevaluate(options.id);
  	}
  	
  },
  data() {
    return {
      title: '评价',
      url: '',
	  id:"",

      // 商品分类
      reviewTit: [
        { name: '全部', count: 10 },
        // { name: '图/视频', count: 1 },
        { name: '好评', count: 26 },
        { name: '中/差评', count: 0 },
      ],

      // 模拟评论数据
      review: [
        { name: '评论1' },
        { name: '评论2' },
      ],

      // 当前选中的分类索引
      isbor: 0,

      // 用于控制滚动位置
      scrollTop: 0,
    };
  },
  methods: {
	  async getevaluate(id) {
		  
	  	
	  	let res = await evaluate(id)
	  	if (res.code == 200) {
	  		this.review=res.rows;
			this.reviewTit[0].count=res.total;
			this.reviewTit[1].count=res.total;
	  		this.total=res.total;
	  	}
	  },
	  
	  
    // 滚动到顶部的方法
    scrollToTop(index) {
      this.isbor = index; // 更新选中的分类索引
      
    },
	goreView(item,index){
		uni.navigateTo({
			url:`/integration/reviewsDetails/index?id=${item.id}&goodsid=${this.id}`
		})
	}
  },
};
</script>

<style lang="scss" scoped>
	.header{
		background: #fff;
	}
.header-title {
  // padding-bottom: 10rpx;
  display: flex;
  justify-content: space-around;

  view {
	  text-align: center;
    color: #808080;
    padding-bottom: 12rpx;
  }

  .borcolor {
    font-size: 32rpx;
    color: #1a1a1a;
    width: 115rpx;
    border-bottom: 4rpx solid #CCA566;
  }
  .tit{
	  font-weight: bold;
  }
}
.action{
	padding: 24rpx;
	.review-item{
		padding: 24rpx;
		border-radius: 16rpx;
		background: #fff;
		margin-bottom: 24rpx;
	}
}
.no-empty{
	height: calc(100vh - 300rpx);
}
</style>